const HtmlWebpackPlugin = require('html-webpack-plugin')
// 此处踩坑,webpack 5 才支持者种方式
// const VueLoaderPlugin = require('vue-loader-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')
module.exports = {
  entry: './src/main.js', // 指定打包的入口文件
  output: {
    path: path.join(__dirname, './dist'), // 指定输出文件的目录
    filename: 'bundle.js' // 指定输出文件名称
  },
  module: {
    rules: [
      // 为vue 配置加载器
      {
        test: /\.vue$/, // 坑：此处加引号 导致 Error: [VueLoaderPlugin Error] No matching rule for .vue files found.
        // Make sure there is at least one root-level rule that matches .vue or .vue.html files.
        use: [
          'vue-loader'
        ],
        exclude: /(node_modules|bower_components)/
      },
      // 配置babel
      {
        test: /\.js/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // 配置eslint-babel
      {
        test: /\.(js|vue)/,
        exclude: /(node_modules|bower_components)/,
        use: 'eslint-loader',
        enforce: 'pre' // 保证编译前执行
      },
      // 配置 vue-style-loader
      {
        test: /\.css$/,
        use: [
          // 'style-loader',
          'vue-style-loader', // 后将vue 中的style 样式添加到js 模块中
          'css-loader' // 先加载编译css
        ]
      },
      // 加载less 文件的loader
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader'//  从js 模块中 创建 style 添加到HTML 中去
          },
          {
            loader: 'css-loader'// css 添加到 js 模块中
          },
          {
            loader: 'less-loader' // 将less 编译成 css
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'img',
            name: '[name].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    // new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Webpack Tutorial',
      template: './src/index.html'
    }),
    new VueLoaderPlugin()
  ]
}
